import axios from 'axios'
import React, { useEffect, useState, useRef } from 'react'
import videojs from "video.js";
import "video.js/dist/video-js.css";
import '../css/advance.css'
import { Space, Table, Tag, Image } from 'antd';
import { useNavigate } from 'react-router-dom';
const { Column, ColumnGroup } = Table;
function Advance() {

  let navigator = useNavigate()
  const videoRef1 = useRef(null);
  const playerRef1 = useRef(null);
  const videoRef2 = useRef(null);
  const playerRef2 = useRef(null);
  const videoRef3 = useRef(null);
  const playerRef3 = useRef(null);
  const [option, setOptopm] = useState({});
  const [src, setsrc] = useState("")
  const [count, setcount] = useState(0)
  const [page, setpage] = useState(1)
  const [data, setdata] = useState([])
  const onReadyPlay = (videoRef, palyer) => {
    videoRef.current = palyer
    // palyer.play();
  }
  const init = (playerRef, videoRef) => {
    let _option = {
      controls: true,
      autoplay: false,//加载完成是否自动播放
      loop: false,//视频播放结束后，是否循环播放
      notSupportedMessage: '此视频暂无法播放，请稍后再试',
      poster: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',//视频封面
      controlBar: {
        // timeDivider: true,//是否显示时间控制条，默认为true
        // remainingTimeDisplay: false,//是否显示剩余时间，默认为true
        fullscreenToggle: false, // 全屏按钮
        children: [//自定义
          { name: 'playToggle' }, // 播放按钮
          {
            name: 'volumePanel', // 音量控制
            inline: false, // 不使用水平方式
          },
          { name: 'currentTimeDisplay' }, // 当前已播放时间
          { name: 'durationDisplay' }, // 总时间
          { name: 'progressControl' }, // 播放进度条
          {
            name: 'pictureInPictureToggle'//支持画中画
          },
          {
            name: 'FullscreenToggle'//支持全屏
          }
        ]
      }
    }
    setOptopm(_option);
    if (!playerRef.current) {
      const videoElement = videoRef.current;
      if (!videoElement) return;

      const player = playerRef.current = videojs(videoElement, _option, () => {
      });
      onReadyPlay(player)
    }
  }
  useEffect(() => {
    init(playerRef1, videoRef1)
    init(playerRef2, videoRef2)
    init(playerRef3, videoRef3)
    axios.get('http://localhost:3000/getpreviews').then((dat, err) => {
      console.log(dat.data.data);
      console.log(dat.data.count);
      let da = []
      dat.data.data.forEach(e => {
        console.log(e);
        da.push({ src: e.src, ...e.paly_id, })
      });
      setdata([...da])
      console.log(da);
    })
  }, [])
  return (
    <div>
      {console.log(data)}
      <Table dataSource={data}>
        <Column title="电影名称" dataIndex="name" key="name" />
        <Column title="简介" width={500} dataIndex="self" key="self" />
        <Column title="电影类型" dataIndex="type" key="type" />
        <Column
          title="Action"
          key="action"
          render={(_, record) => (
            <Space size="middle">
              <a onClick={() => { setsrc(record.name) }}>预览预告片</a>
              <a>Invite {record.lastName}</a>
              <a>Delete</a>
            </Space>
          )}
        />
      </Table>

      <div className='shielded' style={{ display: src != '保你平安' ? 'none' : 'block' }} onClick={() => setsrc('')}>
        <div className="video_play" onClick={(e) => e.stopPropagation()}>
          <video style={{
            width: 600,
            height: 300
          }} ref={videoRef1}
            muted
            className="video-js vjs-big-play-centered">
            <source src={`http://localhost:3000/upload/OhXodMgP5TgNBCm5Y98hiMgK.mp4`} type="video/mp4" />
          </video>
        </div>
      </div>
      <div className='shielded' style={{ display: src != '四海' ? 'none' : 'block' }} onClick={() => setsrc('')}>
        <div className="video_play" onClick={(e) => e.stopPropagation()}>
          <video style={{
            width: 600,
            height: 300
          }} ref={videoRef2}
            muted
            className="video-js vjs-big-play-centered">
            <source src={`http://localhost:3000/upload/F6cdRhdX3JnbJqXwP0q3jPif.mp4`} type="video/mp4" />
          </video>
        </div>
      </div>
      <div className='shielded' style={{ display: src != "   绝色狂花之龙迹神宫" ? 'none' : 'block' }} onClick={() => setsrc('')}>
        <div className="video_play" onClick={(e) => e.stopPropagation()}>
          <video style={{
            width: 600,
            height: 300
          }} ref={videoRef3}
            muted
            className="video-js vjs-big-play-centered">
            <source src={`http://localhost:3000/upload/aSrE8LMe55BZ85mYlDE2ZTB1.mp4`} type="video/mp4" />
          </video>
        </div>
      </div>

    </div>
  )
}
export default Advance
